import {designPage, reactive} from "plain-design-composition";
import {PlainLogo} from 'plain-icons/src/packages/component/logo/react';
import {PageThemeUtils, ThemePrimaryColors} from "../PageThemeUtils";
import {ClientZoom, Select, SelectOption} from "../../../packages";
import logoImage from './ant-plain.png';

export const AppHead = designPage(() => {

  const state = reactive({
    small: !!PageThemeUtils.state.small ? 1 : 0,
    primaryKey: PageThemeUtils.state.primaryKey as string || 'default',
    dark: PageThemeUtils.state.dark ? 'dark' : 'light',
    square: PageThemeUtils.state.square ? 1 : 0,
    zoom: PageThemeUtils.state.zoom || 1,
  });

  const onSizeChange = () => {
    PageThemeUtils.small(state.small === 1);
  };

  const onShapeChange = () => {
    PageThemeUtils.shape(state.square === 1);
  };

  const onZoomChange = () => {
    PageThemeUtils.zoom(state.zoom);
    ClientZoom.set(state.zoom);
  };

  const onDarkChange = () => {
    const val = !state.dark ? false : state.dark === 'dark';
    PageThemeUtils.toggle(val);
  };

  const onPrimaryChange = () => {
    PageThemeUtils.primary(state.primaryKey);
  };

  return () => (
    <div className="app-head">
      <div className="app-head-logo">
        <PlainLogo style={{ fontSize: '28px', marginRight: '0.4em' }}/>
        <img src={logoImage}/>
      </div>
      <div className="app-head-operation">
        <Select v-model={state.primaryKey} onChange={onPrimaryChange} width="100" placeholder="主题色">
          {Object.entries(ThemePrimaryColors).map(([key, value]) => (
            <SelectOption value={key} key={key}>
              <div style={{ display: 'flex', alignItems: 'center' }}>
                {!!value!.primary && <span style={{ height: '1em', width: '1em', display: 'inline-block', marginRight: '4px', background: value!.primary }}/>}
                <span>{value!.label}</span>
              </div>
            </SelectOption>
          ))}
        </Select>
        &nbsp;
        <Select v-model={state.small} onChange={onSizeChange} width="100" placeholder="紧凑主题">
          <SelectOption children="默认尺寸" value={0}/>
          <SelectOption children="紧凑主题" value={1}/>
        </Select>
        &nbsp;
        <Select v-model={state.dark} onChange={onDarkChange} width="100" placeholder="黑白主题">
          <SelectOption children="黑色主题" value="dark"/>
          <SelectOption children="白色主题" value="light"/>
        </Select>
        &nbsp;
        <Select v-model={state.square} onChange={onShapeChange} width="100" placeholder="圆角类型">
          <SelectOption children="小圆角" value={0}/>
          <SelectOption children="无圆角" value={1}/>
        </Select>
        &nbsp;
        <Select v-model={state.zoom} onChange={onZoomChange} width="100" placeholder="页面缩放">
          <SelectOption children="0.6" value={0.6}/>
          <SelectOption children="0.7" value={0.7}/>
          <SelectOption children="0.8" value={0.8}/>
          <SelectOption children="0.9" value={0.9}/>
          <SelectOption children="1.0" value={1}/>
          <SelectOption children="1.1" value={1.1}/>
          <SelectOption children="1.2" value={1.2}/>
          <SelectOption children="1.3" value={1.3}/>
          <SelectOption children="1.4" value={1.4}/>
          <SelectOption children="1.5" value={1.5}/>
          <SelectOption children="1.6" value={1.6}/>
          <SelectOption children="1.7" value={1.7}/>
          <SelectOption children="1.8" value={1.8}/>
          <SelectOption children="1.9" value={1.9}/>
          <SelectOption children="2.0" value={2.0}/>
        </Select>
      </div>
    </div>
  );
});
